import React, {
    Component
} from 'react';
import {
    inject,
    observer,
} from 'mobx-react';
import ReactDOM from 'react-dom';
import {
    withRouter,
    Route,
    Link
} from 'react-router-dom';
import {
    ListAdvanced,
    SearchAdvanced,
    RouteLayout,
    BrowserHrm,
} from 'weaver-mobile-page';
import {
    Icon,
    Popover,
    Flex,
    SwipeAction,
    Badge,
    Tools,
    Bubble
} from 'weaver-mobile';
import OperateGroup from "./OperateGroup.js";
import Suggest from "./Suggest.js";
import SuggestDetail from "./SuggestDetail.js";
import DeleteConfirm from "../../util/DELUtil.js";
import "../../style/group.less";
import { configNavigation } from "../../util/public-func";
const Item = Popover.Item;
const getLabel = Tools.getLabel;

@inject('groupStore')
@withRouter
@observer
export default class Group extends Component {
    componentDidMount() {
        window.em && window.em.configNavigation({
            title:getLabel('518809', '常用组管理'),
            left:{},//恢复默认设置
            showCloseButton:true,
        })
        this.init();
    }

    init = () => {
        const {
            history,
            groupStore
        } = this.props, {
            setHistory,
            getGroupList,
            getAdviceInfo,
        } = groupStore;

        setHistory(history);
        getGroupList();
        getAdviceInfo();
    }

    getTemplate = () => {
        const { renderDeleteConform, deleteGroup, openGroupSettingLayout, showCheck } = this.props.groupStore;
        const color = "#fff",
            padding = "0 5px";

        return {
            default: [{
                key: 'col0',
                render: (data) => {
                    const { name, typespan, result, type } = data;

                    const right = [{
                        text: getLabel(82752, '共享范围'),
                        onPress: () => openGroupSettingLayout(data, "3"),
                        style: {
                            backgroundColor: "#f59a23",
                            color,
                            padding,
                        },
                    }, {
                        text: getLabel(126254, '成员设置'),
                        onPress: () => openGroupSettingLayout(data, "2"),
                        style: {
                            backgroundColor: "#4d7ad8",
                            color,
                            padding,
                        },
                    }, {
                        text: getLabel(91, '删除'),
                        onPress: () => {
                            renderDeleteConform(() => deleteGroup(data.id), "")
                        },
                        style: {
                            backgroundColor: "#d9001b",
                            color,
                            padding,
                        },
                    }, ]

                    return (
                        <SwipeAction
					      right={!showCheck && ( (type === "0") ? right.slice(1) : right ) }
					    >
		      		<Flex direction="column" align="start">
		      			<Flex.Item>
		      				<span className="list-main">
		      					{name}
		      				</span>
		      			</Flex.Item>
		      			<Flex.Item>
		      				<span className="list-sub">
				      			{typespan}
				      			<span style={{marginLeft: 10}}>{ getLabel(518810,"成员{params}人").replace("{params}",result) }</span>
		      				</span>
		      			</Flex.Item>
		      		</Flex>
		      		</SwipeAction>
                    )
                }
            }, ]
        }
    }

    render() {
        const {
            groupStore
        } = this.props, {
            groupListAd,
            showCheck,
            groupSearchStore,
            getGroupList,
            popoverVisible,
            handleVisibleChange,
            handlePopoverSelect,
            deleteGroup,
            renderDeleteConform,
            operateGrouplayout,
            suggestlayout,
            handleHideCheck,
            browserHrmStore,
            setBrowserHrmValue,
            isHas,
            isHasNew,
            suggestDetaillayout,
            suggestDetailBtns,
        } = groupStore;

        groupListAd.searchAdvancedStore.responseKey = "condition";

        return (
            <div className="hrm-group">
            	{ (isHas && isHasNew) && <div className="am-badge-dot"></div> }
				<ListAdvanced
		          store={groupListAd}
		          hasAdvanceSerach
		          selectedProps={getLabel('518811','个常用组') }
		          rowKey="id"//列表数据主键
		          searchKey="name"//快速搜索框字段名
		          dataFetchOptions={{
		          	url: '/api/hrm/group/getSearchResult?cmd=base',
		            method: 'POST',
		          }}
		          conditionFetchOptions={{
		            url: '/api/hrm/group/getSearchCondition?cmd=base',
		            method: 'GET',
		          }}
		          getTemplate={this.getTemplate}
		          searchBarProps={{
		          	className:"search-select",
	        		placeholder:getLabel(500351, "请输入关键字") ,
		            showExtraButton: true,//是否显示扩展按钮
		            onExtraButtonClick:(key) => { 
                        if (key == "advanced") {
                            // configNavigation(getLabel(347,"高级搜索"))
                        }
                    },
		            extraButton:[//扩展按钮
			          { key: 'advanced', show:<Link to={groupListAd.searchAdvancedStore.path}><Icon type='filter-o'/></Link> },
			          { key: 'drop', show:(
			          	<Popover
			          		mask//是否显示遮罩背景层
			          		overlayClassName="fortest"
			          		overlayStyle={{ color: 'currentColor' }}
			          		visible={popoverVisible}
			          		onVisibleChange={handleVisibleChange}
			          		overlay={[
				              (<Item key="1" >{ getLabel(386496, "新建常用组") } </Item>),
				              (<Item key="2" >{ getLabel(500410, "批量操作") }</Item>),
				              (isHas &&<Item key="3" >
				              		{isHasNew ? (
				              			<Badge dot={true}>
								            <span>{ getLabel(126253, "公共组调整建议") } </span>
								          </Badge>
				              		) : <span>{ getLabel(126253, "公共组调整建议") }</span>
				              		}
          						</Item>),
				            ]}//弹出层内容
			          		onSelect={handlePopoverSelect}//选中某选项时的回调函数
			          	>
			          		<Icon key="ellipsis" type="ellipsis" />
			          	</Popover>
			          ) },
			        ],
		          }}
		          showCheck={showCheck}
		          buttonGroupData={[{
		            key: 'submit',
		            text: getLabel(32136, '批量删除') ,
		            onClick: () => {
		            	const { listViewStore } = groupListAd;
						const selectedRowKeys = listViewStore.selectedRowKeys;
						
						if(selectedRowKeys.length > 0){
		            		renderDeleteConform(deleteGroup,"batch");
						}else{
							Bubble.warning(getLabel(30951,"请选择需要删除的数据!"));
						}
		            },
		            type: 'primary',
		          }]}
		          onHideCheck={handleHideCheck}
		        />
		        
				<Route
		          key={operateGrouplayout.id}
		          path={operateGrouplayout.path}
		          render={() => (
		            <RouteLayout>
		              <div
		                key="wmPoutePageDemo"
		                className="wm-route-layout wm-demo-route-layout-page"
		              >
		                <OperateGroup />
		              </div>
		            </RouteLayout>
		          )}
		        />
		        <Route
		          key={suggestlayout.id}
		          path={suggestlayout.path}
		          render={() => (
		            <RouteLayout>
		              <div
		                key="wmPoutePageDemo"
		                className="wm-route-layout wm-demo-route-layout-page"
		              >
		                <Suggest store={groupStore}/>
		              </div> 
                    </RouteLayout>)}
                 /> 
                <Route
                    key = { suggestDetaillayout.id }
                    path = { suggestDetaillayout.path }
                    render = {
                        () => (
                            <RouteLayout>
                              <div
                                key="wmPoutePageDemo"
                                className="wm-route-layout wm-demo-route-layout-page"
                              >
                                <SuggestDetail />
                              </div>
                            </RouteLayout>)}
                    /> 
                    <div className = "browser-hrm-wrapper" >
                        <BrowserHrm
                          label={getLabel(516509, "多人力资源")} 
                          store={browserHrmStore}
                          hasAdvanceSerach
                          isSingle={false}
                          type={1}
                          onChange={setBrowserHrmValue}
                          /> 
                    </div> 
            </div >
        );
    }
}